<template>
  <div style="padding: 20px">
    <div>
      <el-input placeholder="关键词搜索" v-model="keyword" style="width: 240px;" @change="searchComment">
        <el-button slot="append" icon="el-icon-search" @click="searchComment"></el-button>
      </el-input>
      <el-button icon="el-icon-refresh" circle @click="refreshComment" style="width: 40px; margin-left: 8px"
        type="success"></el-button>
    </div>
    <el-table :data="commentList" style="width: 100%; border-radius: 10px; margin-top: 8px" stripe v-loading="loading">
      <el-table-column type="index" :index="indexMethod" label="序号" width="75" align="center">
      </el-table-column>
      <el-table-column prop="articleTitle" label="新闻标题" width="180" show-overflow-tooltip
        align="center"></el-table-column>
      <el-table-column label="评论人" width="180" align="center">
        <template slot-scope="scope">
          <div style="display: flex; align-items: center;justify-content: center;">
            <img :src="scope.row.avatar" style="width: 38px; height: 38px; border-radius: 50%" />
            <span style="padding-left: 4px">{{ scope.row.nickname }}</span>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="content" label="评论内容" width="220" show-overflow-tooltip align="center">
      </el-table-column>
      <el-table-column label="状态" width="80" sortable prop="status" align="center">
        <template slot-scope="scope">
          <el-tag :type="scope.row.status === 1 ? 'success' : 'danger'">
            {{ scope.row.status === 1 ? "正常" : "违规" }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="createTime" label="创建时间" align="center"> </el-table-column>
      <el-table-column label="操作" fixed="right" width="180">
        <template slot-scope="scope">
          <el-button type="primary" icon="el-icon-edit" circle @click="handleEdit(scope.row)"
            style="width: 40px"></el-button>
          <el-button type="danger" icon="el-icon-delete" circle style="width: 40px;"
            @click="deleteComment(scope.row.id)"></el-button>
        </template>
      </el-table-column>
    </el-table>

    <div style="width: 40px; margin-top: 8px">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
        :current-page="paramsForm.pageNum" :page-sizes="[10, 20, 30, 50]" :page-size="paramsForm.pageSize"
        layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="dialogVisible" title="修改评论">
      <el-form :model="updateCommentForm" label-width="80px">
        <el-form-item label="评论内容">
          <el-input v-model="updateCommentForm.content" type="textarea" :autosize="{ minRows: 2, maxRows: 4 }"
            placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item label="状态">
          <el-radio-group v-model="updateCommentForm.status">
            <el-radio :label="1">正常</el-radio>
            <el-radio :label="0">违规</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogVisible = false" style="width: 68px" size="medium">取消</el-button>
        <el-button type="primary" @click="updateOneComment" style="width: 68px" size="medium">保存</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {
  getAllComment,
  deleteCommentById,
  updateComment,
} from "@/api/controller/6.PingLunMoKuai/getAllComment";
export default {
  mounted() {
    this.getComment();
  },
  data() {
    let keyword = "";
    let commentList;
    let total = 0;
    let loading = false;
    let dialogVisible = false;
    return {
      paramsForm: {
        pageSize: 10,
        pageNum: 1,
        key: "",
      },
      updateCommentForm: {
        id: -1,
        content: "",
        status: -1,
      },
      keyword,
      commentList,
      total,
      loading,
      dialogVisible,
    };
  },
  methods: {
    indexMethod(index) {
      return (
        index + 1 + this.paramsForm.pageSize * (this.paramsForm.pageNum - 1)
      );
    },
    searchComment() {
      if (this.keyword === "") {
        this.$message.error("搜索关键词不能为空！");
      } else {
        this.paramsForm.key = this.keyword;
        this.getComment();
      }
    },
    refreshComment() {
      this.paramsForm.key = "";
      this.getComment();
    },
    async getComment() {
      this.loading = true;
      getAllComment(
        this.paramsForm.pageNum,
        this.paramsForm.pageSize,
        this.paramsForm.key
      )
        .then((response) => {
          const { data } = response;
          this.commentList = data.list;
          this.total = data.total;
        })
        .catch((error) => {
          this.$message.error(error.message);
        })
        .finally(() => {
          this.loading = false;
        });
    },
    async deleteComment(id) {
      this.$confirm('此操作将永久删除该评论, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        deleteCommentById(id)
          .then((response) => {
            const { message } = response;
            this.$message.success(message);
            this.getComment();
          })
          .catch((error) => {
            this.$message.error(error.message);
          });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    async updateOneComment() {
      updateComment(this.updateCommentForm)
        .then((response) => {
          const { message } = response;
          this.$message.success(message);
          this.getComment();
          this.dialogVisible = false;
        })
        .catch((error) => {
          this.$message.error(error.message);
        });
    },
    handleEdit(data) {
      this.updateCommentForm.id = data.id;
      this.updateCommentForm.content = data.content;
      this.updateCommentForm.status = data.status;
      this.dialogVisible = true;
    },
    handleSizeChange(val) {
      this.paramsForm.pageSize = val;
      this.getComment();
    },
    handleCurrentChange(val) {
      this.paramsForm.pageNum = val;
      this.getComment();
    },
  },
};
</script>

<style scoped></style>